<template>
	<view class="zy-row">
		<view class="zy-text-white-lg"
		 :class="{
			 'black':color=='black', 'red':color=='red', 'gray':color=='gray', 'yellow':color=='yellow',
			 'sm': size=='sm','normal': size=='normal','lg': size=='lg',
			 'zy-font-bold':bolded
			 }"
		>₱</view>
		<view class="zy-text-white-lg-super zy-ml-sm"
		:class="{
			 'black':color=='black', 'red':color=='red', 'gray':color=='gray', 'yellow':color=='yellow',
			 'normal': size=='sm','lg': size=='normal','lg-super': size=='lg',
			 'zy-font-bold':bolded
			 }"
		>{{price}}</view>
	</view>
</template>

<script>
	export default {
		name:"zy-price",
		data() {
			return {
				
			};
		}, 
		props:{
			price:{
				type: String,
				default(){
					return ''
				}
			},
			color:{
				type: String,
				default(){
					return 'white'
				}
			},
			size:{
				type: String,
				default(){
					return 'normal'
				}
			},
			bolded:{
				type: Boolean,
				default(){
					return true
				}
			},

		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.black{
		color: $zy-color-black;
	}
	.red{
		color: $zy-color-main;
	}
	.gray{
		color: $zy-color-gray-base;
	}
	.yellow{
		color: $zy-color-yellow;
	}
	
	.sm{
		font-size: $zy-font-sm;
	}
	.normal{
		font-size: $zy-font-base;
	}
	.lg{
		font-size: $zy-font-lg;
	}
	.lg-super{
		font-size: $zy-font-lg-super;
	}
	
	

</style>